<script setup lang="ts">
import {useRouter} from "vue-router";
import {showToast} from "vant";
import {onMounted, ref} from "vue";

import MyAxios from "../plugins/myAxios.ts";
import usePostStore from "../stores/post.ts";
import {storeToRefs} from "pinia";


const router = useRouter()


const onClickRight = () => {
  router.push('/indexSearch')
}


const list = ref<{
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
  userId: number;
  createTime: string;
  updateTime: string;
}[]>([]); // 使用 ref 创建响应式变量


const isLoading = ref(false);

const pageSize = ref(20); // 每页条数

// const loading = ref(false); // 加载状态
// const finished = ref(false); // 加载状态

const postStore = usePostStore(); // 引入 vuex 状态管理
const { pageNum } = storeToRefs(postStore)

const editPageNum = () => {
  postStore.pageNum += 1;
}
const editPageNum2 = () => {
  postStore.pageNum -= 1;
}
//定义 item 的值并规定类型
interface Item {
  // interface 改成 type 也行
  id: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: 'post/get',
    query: {
      id: item.id
    }
  })
}


onMounted(() => {
  getOriginalPostList();
});


const onRefresh = () => {
  // 省略其他逻辑...

  // 显示加载动画
  isLoading.value = true;


  // 模拟异步请求
  setTimeout(() => {

    // 隐藏加载动画
    isLoading.value = false;

    editPageNum();


    MyAxios.post('/post/list', {pageNum: pageNum.value, pageSize: pageSize.value}) // 发送 POST 请求
        .then(res => {
          console.log(res); // 打印接口返回的数据
          console.log(res.data);
          showToast('nnn');
          if(res.data.data == null){
            showToast('没有更多数据了')
            editPageNum2();
          }else{
            list.value = [];
            showToast('刷新成功');
            list.value = res.data.data; // 使用 ref 创建的响应式变量

            console.log(list.value); // 打印接口返回的数据
            // 处理其他返回的数据...
            return res.data.data;
          }

        })
        .catch(err => {
          console.error("Error fetching data:", err);
        });
    // 显示toast提示


  }, 1000);
};


const getOriginalPostList = () => {
  MyAxios.post('/post/list', {pageNum: pageNum.value, pageSize: pageSize.value}) // 发送 POST 请求
      .then(res => {

        list.value = res.data.data; // 使用 ref 创建的响应式变量
        console.log(list.value); // 打印接口返回的数据

        // 处理其他返回的数据...
      })
      .catch(err => {
        console.error("Error fetching data:", err);

      });
}



const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onClickLeft = () => {
  router.push('/select')
}



</script>

<template>



  <div style="width: 100vw;height: 100vh">
    <van-nav-bar class="nav-bar"
                 title="帖子"
    >

    </van-nav-bar>
    <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />

    <img src="../assets/最终搜索框.png" class="back-btn" alt="搜索" @click="onClickRight" />

    <div class="container">
      <van-pull-refresh :model-value="isLoading" @update:model-value="(val) => isLoading = val" :head-height="120" @refresh="onRefresh" style="width: 100%;height: 100%;">
        <!-- 加载提示 -->
        <template #loading>
          <img src="../assets/最终刷新图片.png" class="haha" alt="加载中" />
        </template>
        <van-list v-model="loading" :finished="finished"  finished-text="没有更多了" @load="onLoad" :offset="20" class="list">

          <van-card
              class="show-card"
              v-for="item in list"
              :title="item.title"
              :desc="item.content"
              @click="postDetails(item)"
          />
        </van-list>
      </van-pull-refresh>
    </div>

    <!--    <van-text-ellipsis :content="listItem" />-->

  </div>



</template>

<style scoped>
.back-btn {
  position:fixed;
  float: right;
  right: 5px;
  top: -2px;

  width: 50px;
  height: 50px;
  z-index:2;
}
.back-btn1 {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

.list {
  margin-top: 60px;
  margin-bottom: 50px;

}


.show-card {
  margin-top: 10px;
  width: 90%;
  height: 100px;
  margin-left: 5%;
  border-radius: 10px;
  top: 6%;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}




.haha {
  /*在各种手机的中间显示*/
  top: 30%;
  left: 35%;
  /*设置宽高*/
  width: 100px;
  height: 100px;
  /*设置居中*/
  position: absolute;
  margin: auto;

}


</style>